<template>
  <div class="autocomplete-demo">
    <tiny-autocomplete
      v-model="value"
      value-key="name"
      :fetch-suggestions="querySearch"
      popper-class="my-autocomplete"
      :popper-append-to-body="false"
      placeholder="请输入内容"
    >
      <template #default="{ slotScope }">
        <div class="name">{{ slotScope.name }}</div>
        <span class="addr">{{ slotScope.address }}</span>
      </template>
    </tiny-autocomplete>
  </div>
</template>

<script>
import { Autocomplete } from '@opentiny/vue'

export default {
  components: {
    TinyAutocomplete: Autocomplete
  },
  data() {
    return {
      list: [],
      value: '',
      popperAppendToBody: true
    }
  },
  mounted() {
    this.list = this.loadAll()
  },
  methods: {
    querySearch(queryString, cb) {
      let list = this.list
      let res = queryString ? list.filter(this.createFilter(queryString)) : list

      // 返回建议列表的数据
      cb(res)
    },
    createFilter(queryString) {
      return (listItem) => listItem.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    },
    loadAll() {
      return [
        {
          name: 'GFDDDDDDD科技公司',
          address: '福州'
        },
        {
          name: 'WWWWWWWWWW科技公司',
          address: '深圳福田区'
        },
        {
          name: 'RFVVVVVV有限责任公司',
          address: '中山市'
        },
        {
          name: 'TGBGBBBBBBBB公司',
          address: '梅州'
        },
        {
          name: 'YHNNNNNNN科技公司',
          address: '韶关'
        },
        {
          name: '康康物业公司',
          address: '广州天河区'
        }
      ]
    }
  }
}
</script>

<style>
.autocomplete-demo {
  min-height: 280px;
}

.my-autocomplete li {
  line-height: normal !important;
  padding: 7px !important;
}

.my-autocomplete li .name {
  text-overflow: ellipsis;
  overflow: hidden;
}

.my-autocomplete li .addr {
  font-size: 12px;
  color: #a29b91;
}
</style>
